<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            margin: 0px;
        }
        .header-box{
            height: 55px;
            border-bottom: 1px solid #ccc;
            box-shadow: 0 0 8px #aaa;
        }
        .header-box .nav{
            list-style: none;
            display: flex;
            flex-flow: row nowrap;
            height: 100%;
            margin: 0px;
            justify-content: center;
        }
        .header-box .nav li{
            height: 100%;
            line-height: 55px;
            padding: 0px 10px;
            cursor: pointer;
        }
        .header-box .nav li:hover{
            color: orangered;
        }
        .content-box{
            display: flex;
            flex-flow: row nowrap;
        }
        .article-list{
            width: 70%;
            background-color: #dedede;
        }
        .hot-list{
            width: 30%;
            background-color: aquamarine;
        }
        .article{
            border: 1px solid brown;
        }
    </style>
</head>
<body>
    <!-- 
        组件化开发：将页面拆分成多个自定义标签，由不同的标签提供特定的页面结构、样式、功能
                   当需要使用该标签时，只需要在页面书写标签，就可以完整加载上述功能
        组件化的拆分错误：
            + 拆分的组件不一定都是复用组件 【页面复用构成组件(页面组件)、复用功能组件(UI组件)、构成工具组件(工具组件)】
            + 组件拆分过细，组件属于自定义标签，在后续的业务开发中会对数据传递和共享代理很大的麻烦
            + 一味的追求组件化，会导致项目开发时组件的复用性和扩展性降低，反而会导致组件无法在不同的场景中进行使用
    -->
    <div id="app">
        <header-comp></header-comp>
        <div class="content-box">
            <!-- 下述标签无法识别 -->
            <!-- <ArticleList></ArticleList> -->
            <!-- 下述标签可以识别 -->
            <article-list></article-list>
            <hot-list></hot-list>
        </div>
    </div>

    <script type="text/x-template" id="header-comp">
        <div class="header-box">
            <ul class="nav">
                <li v-for=" item in menus" @click="gotoPage()">{{ item.title }}</li>
            </ul>
        </div>
    </script>
    <script type="text/x-template" id="article-list">
        <div class="article-list">
           文章列表
           <hr>
           <!-- <hot-list></hot-list> -->
           <!-- <article-item></article-item>
           <article-item></article-item>
           <article-item></article-item>
           <article-item></article-item> -->
           <article-item v-for="item in 3"></article-item>
           <hr>
        </div>
    </script>
    <script type="text/x-template" id="hot-list">
        <div class="hot-list">
           热门作家
           <hr>
           <!-- <article-list></article-list> -->
           <hr>
        </div>
    </script>

    <script type="module"> 
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        import ArticleItem from "./components/ArticleItem.js";
        // 全局组件：通过app应用对象进行定义后，该组件在当前的vue应用环境中的其它任意组件中都可直接使用无需再次定义
        // 局部组件：通过components属性构建的局部组件，只能被使用于该属性定义时vue实例对应的容器中
        const app = createApp({
            data(){
                return {
                    
                }
            },
            // 局部组件定义方法
            // components 属性取值object 以 key:value 为一个组件的定义组成
            components:{
                // key 为组件自定义标签名
                // value 取值 Object 为组件定义配置 ，等效 Vue.createApp(options) options 参数
                HotList:{
                    template:"#hot-list"
                },
                // ArticleItem:ArticleItem
            }
        })

        // 全局组件定义方法
        // app.component(name, definition)
        //      + name 组件自定义标签名 => 一个环境下的全局组件名必须保证唯一
        //      + definition 组件定义配置，取值 Object => 取值等同于 Vue.createApp(options) 的options
        // 
        // 自定义的组件使用时不是通过挂载方式完成页面容器和位置指定的，
        //          是通过组件标签名称在页面的描述启动vue组件实例的创建和页面的显示
        // 组件的复用只是在复用结构、样式和特定功能，但数据必须和开发的项目保持规则上的关系 => 组件数据独立
        //          每一个vue实例的仓库数据都是不能共享给其它vue实例的
        app.component("header-comp",{
            // template:`<div class="header-box">导航</div>`
            template:"#header-comp",
            data() {
                return {
                    menus:[
                        { title:"首页" },
                        { title:"目的地" },
                        { title:"旅游攻略" },
                        { title:"去旅行" },
                        { title:"机票" },
                        { title:"订酒店" },
                        { title:"社区" },
                        { title:"社区" }
                    ]
                }
            },
            methods: {
                gotoPage() {
                    alert(1)
                }
            },
        })

        // html页面的标签名解析时是忽略大小写的，所以驼峰式标签名定义，在浏览器解析HTML时无法识别
        //      => vue中定义的驼峰标签名在页面使用时转换为 连字符标签名称规则
        //      => 例如 ArticleList 标签名对应的页面标签 <article-list></article-list>
        app.component("ArticleList",{
            template:"#article-list",
            components:{
                ArticleItem
            }
        })
        // app.component("ArticleItem",ArticleItem)
        app.mount("#app")
    </script>
</body>
</html>